<div class="card">
  <div class="card-header">Edit File</div>
  <div class="card-body">
    <div class="row" [hidden]="!postError" class="alert alert-danger">
      {{ postErrorMessage }}
    </div>
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <div class="mb-3 row">
        <label for="name" class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10">
          <input id="name" name="name" class="form-control" [(ngModel)]="file.name" required #nameField="ngModel"
            (blur)="onBlur(nameField)" [class.is-invalid]="form.submitted && nameField.invalid" />
          <span class="invalid-feedback"> Enter a name </span>
        </div>
      </div>
      <div class="mb-3 row">
        <label for="description" class="col-sm-2 col-form-label">Description</label>
        <div class="col-sm-10">
          <input id="description" name="description" class="form-control" [(ngModel)]="file.description" required
            #descriptionField="ngModel" (blur)="onBlur(descriptionField)"
            [class.is-invalid]="form.submitted && descriptionField.invalid" />
          <span class="invalid-feedback"> Enter a description </span>
        </div>
      </div>
      <div class="mb-3 row">
        <label for="formFile" class="col-sm-2 col-form-label">File</label>
        <div class="col-sm-10">
          <input id="formFile" name="formFile" class="form-control" value="{{ file.fileName }}" disabled />
        </div>
      </div>
      <div class="mb-3 row">
        <label for="encrypted" class="col-sm-2 col-form-label">Encrypted</label>
        <div class="col-sm-10">
          <input type="checkbox" id="encrypted" name="encrypted" [ngModel]="file.encrypted" disabled />
        </div>
      </div>
      <div class="mb-3 row">
        <label for="description" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
          <button class="btn btn-primary">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="card-footer">
    <a class="btn btn-outline-secondary" [routerLink]="['/files']" style="width: 80px">
      <i class="fa fa-chevron-left"></i> Back
    </a>
    &nbsp;
    <button type="button" class="btn btn-primary btn-secondary" (click)="viewAuditLogs(auditlogtemplate)">
      View Audit Logs
    </button>
  </div>
</div>
<ng-template #auditlogtemplate>
  <div class="modal-body text-center">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Date Time</th>
            <th>User Name</th>
            <th>Action</th>
            <th>Name</th>
            <th>Description</th>
            <th>File Name</th>
            <th>File Location</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let auditLog of auditLogs">
            <td>
              {{ auditLog.createdDateTime | date: "dd/MM/yyyy hh:mm:ss" }}
            </td>
            <td>{{ auditLog.userName }}</td>
            <td>{{ auditLog.action }}</td>
            <td [style.color]="auditLog.highLight.name ? 'red' : ''">
              {{ auditLog.data.name }}
            </td>
            <td [style.color]="auditLog.highLight.description ? 'red' : ''">
              {{ auditLog.data.description }}
            </td>
            <td [style.color]="auditLog.highLight.fileName ? 'red' : ''">
              {{ auditLog.data.fileName }}
            </td>
            <td [style.color]="auditLog.highLight.fileLocation ? 'red' : ''">
              {{ auditLog.data.fileLocation }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</ng-template>